<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input
          v-model="searchInfo.keyword"
          style="width:140px;margin-right: 5px"
          placeholder="短信消息内容"
        />
        <el-button type="primary" @click="searchInfoMations">搜 索</el-button>
      </div>
      <el-button class="right" type="primary" @click="jump('create')">发送短信</el-button>
    </div>
    <el-table ref="table" :data="tableData" border stripe :height="this.$getTableHeight">
      <el-table-column show-overflow-tooltip label="短信标题">
        <template slot-scope="scope">
          <span class="blue" @click.stop="changeActive(scope.row)">{{ scope.row.messageTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="messageContent" label="短信内容" />
      <el-table-column show-overflow-tooltip prop="sendTime" label="发送时间" />
      <el-table-column width="150" show-overflow-tooltip label="发送短信平台">
        <template
          slot-scope="scope"
        >{{ scope.row.sendStatus === true?'已发送':scope.row.sendStatus === false?'未发送':'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column width="80" show-overflow-tooltip label="发送用户">
        <template
          slot-scope="scope"
        >{{ scope.row.sendMemberStatus=== true?'已发送':scope.row.sendMemberStatus=== false?'未发送':'' }}</template>
      </el-table-column>
      <el-table-column width="80" show-overflow-tooltip prop="planMemberCount" label="应发人数" />
      <el-table-column width="80" show-overflow-tooltip prop="actualMemberCount" label="实发人数" />
      <el-table-column width="80" show-overflow-tooltip prop="operator" label="发送人" />
      <el-table-column width="120" show-overflow-tooltip prop="creationTime" label="创建时间" />
      <el-table-column width="110" label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
             <span
              v-if="!scope.row.sendStatus"
              class="_primary"
              @click="sureSendMsg(scope.row)"
            >发送</span>
            <span
              class="_delete"
              @click="deleteRow(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        title="发送短信"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <create :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from '~/components/commom/pagination';
import detail from '~/components/shortMessage/detail';
import create from '~/components/shortMessage/create';
import {
  _currentChange,
  _sizeChange,
  createDics,
  getDicName,
  reduceArr,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  changeTableHeight
} from '~/utils/util';
import mmUrl from '~/utils/utilUrl';
import initData from '~/utils/initData';
export default {
  components: {
    Pagination,
    detail,
    create
  },
  data() {
    return initData.shortMessage
  },
  mounted() {
    this.initGetTableData()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    sureSendMsg(res){
      this.$post({
        url:"/manage/messages/sendMessages",
        data:{
           id: res.id
        }
      }).then(res=>{
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.initGetTableData()
      })
    },
    jump(res) {
      res === 'create' ? (this.dialogVisible = true) : '';
    },
    handleClose() {
      this.dialogVisible = false
      this.updateRight = !this.updateRight
      this.searchInfoMations('no')
    },
    clearJumpId() {
      this.active = false
      this.jumpId = null
    },
    openDialog() {
      this.isCreate = false
      this.dialogVisible = true
    },
    changeActive(id) {
      this.active = true
      this.jumpId = id
    },
    getDicNameInn(res) {
      if (this.dics) {
        const result = Object.assign(
          { data: JSON.parse(JSON.stringify(this.dics)) },
          res
        )
        return getDicName(result)
      }
    },
    initGetTableData() {
      this.$post({
        url: mmUrl.message.pageLoad,
        data: {
          page: this.page
        }
      })
        .then(res => {
          this.tableData = res.items.items
          this.totalCount = res.items.totalCount
          this.loading = false
          changeTableHeight(this)
        })
        .catch()
    },
    searchInfoMations(res) {
      // 点击搜索按钮触发的事件
      this.copySearchInfo = JSON.parse(JSON.stringify(this.searchInfo))
      const result = _searchInfo(res, this.page, this.copySearchInfo)
      this.changeTableDate(result)
    },
    deleteRow(row) {
      const that = this
      _deleteMethods('/manage/messages/deletedMessage', row, that).then(
        () => {
          that.searchInfoMations('no')
        }
      )
    },
    handleSizeChange(val) {
      // 修改当前分页大小触发事件
      const result = _sizeChange(val, this.page, this.copySearchInfo) // 传递当前值 分页信息，以及需要copy的对象
      this.changeTableDate(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo)
      this.changeTableDate(result)
    },
    changeTableDate(res) {
      const that = this
      _changeTable(mmUrl.message.pageLoad, res, that)
    }
  }
}
</script>

<style>
</style>
